import React, { Component } from 'react';
import './style.css'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      items: [
        "<script>alert('11')</script>"
      ]
    };
  }
  handleChange = (e) => {
    this.setState({
      inputValue: e.target.value
    });
  }
  handleClick = () => {
    this.setState({
      items: [...this.state.items, this.state.inputValue]
    });
    console.log(JSON.stringify(this.state.items));
  }
  handleItemDelete = index => {
    this.state.items.splice(index, 1);
    this.setState({
      items: this.state.items
    });
  }
  render() {
    return (
      <div className="App">
        <label htmlFor='insertArea'>任务简述：</label>
        <input id='insertArea'
          className='input'
          value={this.state.inputValue}
          onChange={this.handleChange} />
        <button onClick={this.handleClick}>提交</button>
        <ul>
          {this.state.items.map((item, index) =>
            <li key={index}
              dangerouslySetInnerHTML={{ __html: item}}
              onClick={this.handleItemDelete.bind(this, index)}>
              {/* {item} */}
              </li>)}
        </ul>
      </div>
    );
  }
}

export default App;
